<template>
  <div class="index">
    <el-container>
      <el-header style="background-color: rgb(24, 144, 255)">
        <el-row :gutter="24" style="height: 100%">
          <el-col :span="4">
            <h1 style="line-height: 60px; width: 200px">汽车管理系统</h1>
          </el-col>
          <el-col :span="6" style="height: 100%; width: 380px; float: right">
            <el-tag
              type="info"
              style="margin: 4% 8px; font-size: 16px; width: 200px"
              >登录用户:{{ username }}</el-tag
            >

            <el-button type="primary" plain size="small" @click="loginOut()"
              >退出登录</el-button
            >
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="12" style="width: 100%; height: 100%">
              <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                @select="handleOpen"
                :router="true"
              >
                <el-menu-item index="order">
                  <template slot="title">
                    <i class="el-icon-truck"></i>
                    <span>汽车管理</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="cargo">
                  <i class="el-icon-menu"></i>
                  <span slot="title">库存管理</span>
                </el-menu-item>
                <el-menu-item index="stock">
                  <i class="el-icon-discount"></i>
                  <span slot="title">仓库管理</span>
                </el-menu-item>
                <el-menu-item index="using">
                  <i class="el-icon-setting"></i>
                  <span slot="title">零件表</span>
                </el-menu-item>
                <el-menu-item index="gys">
                  <i class="el-icon-user"></i>
                  <span slot="title">供应商管理</span>
                </el-menu-item>
                <el-menu-item index="purchase">
                  <i class="el-icon-tickets"></i>
                  <span slot="title">采购订单管理</span>
                </el-menu-item>
                <el-menu-item index="salesOrder">
                  <i class="el-icon-document"></i>
                  <span slot="title">销售订单管理</span>
                </el-menu-item>
                <el-menu-item index="user">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="role">
                  <i class="el-icon-user"></i>
                  <span slot="title">角色管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss">
</style>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
  mounted() {
    let username = window.localStorage.getItem("username");
    this.username = username;
    this.$router.push("../order");
  },
  methods: {
    loginOut() {
      let token = window.localStorage.getItem("token");
      this.$axios({
        method: "post",
        url: this.GLOBAL.loginOut,
        headers: { "X-Access-Token": token },
      })
        .then((result) => {
          if (result.data.code == 200 || result.data.code == "200") {
            window.localStorage.removeItem("token");
            window.localStorage.removeItem("username");
            this.$message({
              message: "退出登录成功",
              type: "success",
            });

            this.$router.push("/");
          } else {
            this.$message({
              message: "退出登录失败",
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>